/**
* @Description: WoShop商城
* @Author: 梧桐
* @Copyright: 武汉一一零七科技有限公司©版权所有
* @Link: www.wo-shop.net
* @Contact: QQ:2487937004
*/
<template>
	<view>
		<view class="wallet-wrap u-m-20">
			<u-row gutter="5" class="row1 u-flex">
				<u-col class="title" span="12" text-align="left">{{$t('我的资产')}}
				<u-icon name="integral" size="32"class="title-icon"></u-icon>
				</u-col>
			</u-row>
			<u-row class="row2 u-row-between">
				<u-col span="6" text-align="center">
					<view class="title">{{$t('余额')}}</view>
					<view class="u-flex u-row-center">
						￥<text class="bold">{{wallet.money}}</text>
					</view>
				</u-col>
				<u-col span="6" text-align="center" @click="navigateTo('/pagesC/wallet/myBankCard')">
					<view class="title">{{$t('银行卡')}}</view>
					<view class="u-flex u-row-center">
						<text class="bold">{{wallet.bankcard_count}}</text>{{$t('张')}}
					</view>
				</u-col>
			</u-row>
			<u-row class="u-flex divider"></u-row>
			<u-row class="row3 u-row-between">
				<u-col span="3" text-align="center">
					<view class="title">{{$t('优惠券')}}</view>
					<view class="u-flex u-row-center">
						<text class="bold">{{wallet.coupon_count}}</text>{{$t('张')}}
					</view>
				</u-col>
				<u-col span="3" text-align="center">
					<view class="title">{{$t('积分')}}</view>
					<view class="u-flex u-row-center">
						<text class="bold">{{wallet.integral}}</text>
					</view>
				</u-col>
				<u-col span="3" text-align="center">
					<view class="title">{{$t('会员等级')}}</view>
					<view class="u-flex u-row-center">
						<text class="bold">L2</text>
					</view>
				</u-col>
				<u-col span="3" text-align="center" @click="navigateTo('/pagesB/member/member')">
					<view class="title">{{$t('会员权益')}}</view>
					<view>
						<u-icon class="info bold" name="info-circle" :size="30"></u-icon>
					</view>
				</u-col>
			</u-row>
		</view>
		<view class="tools u-m-t-20 u-m-b-20">
			<u-grid :col="3" :border="true">
				<u-grid-item class="u-border-right" @click="navigateTo('/pagesC/wallet/recharge')">
					<u-icon name="rmb-circle" :size="46"></u-icon>
					<view class="grid-text">{{$t('余额充值')}}</view>
				</u-grid-item>
				<u-grid-item class="u-border-right" @click="getBankCardinfo">
					<u-icon name="zhuanfa" :size="46"></u-icon>
					<view class="grid-text">{{$t('余额提现')}}</view>
				</u-grid-item>
				<u-grid-item @click="navigateTo('/pagesC/integral/index')">
					<u-icon name="gift" :size="46"></u-icon>
					<view class="grid-text">{{$t('赚积分')}}</view>
				</u-grid-item>
			</u-grid>
		</view>
		<u-modal v-model="payTipShow" :show-cancel-button="true" :content="$t('请先绑定银行卡')" confirm-color="#FA3F3F" :cancel-text="$t('取消')" :confirm-text="$t('去绑定')" :show-title="false" @confirm="$u.route('pagesC/wallet/myBankCard')" ref="uModal" ></u-modal>
		
		<u-cell-group>
			<u-cell-item icon="rmb-circle-fill" :icon-style="iconStyle" :border-top="true" :title="$t('充值记录')"
				@click="$u.route('pagesC/wallet/rechargeList')"></u-cell-item>
			<u-cell-item icon="more-circle-fill" :icon-style="iconStyle" :border-top="true" :title="$t('提现记录')"
				@click="$u.route('pagesC/wallet/withdrawList')"></u-cell-item>
		</u-cell-group>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imgSTATICURL: this.STATICURL,
				wallet: {},
				iconStyle: {
					color: '#f24e00'
				},
				payTipShow: false,
			};
		},
		onShow() {
			this.getWallet();
		},
		onLoad() {
			
		},
		methods: {
			navigateTo(url, type) {
				this.$navigateTo(url)
			},
			getWallet() {
				this.$http.getWallet().then(res => {
					if (res.status == 200) {
						this.wallet = res.data;
					}
				});
			},
			getBankCardinfo() {
				this.$http.getBankCardinfo().then(res => {
					if (res.status == 200) {
						if (res.data) {
							this.getnav("/pagesC/wallet/withdraw?type=1");
						}
					} else {
						this.payTipShow = true
					}
				});
			}
		}
	};
</script>

<style lang="scss">
	@import '~uview-ui/index.scss';
	.settled {
		background-color: transparent !important;
		padding: 30upx;
	}

	.u-m-b-20 {
		margin-bottom: 20upx;
	}

	.bg-img {
		margin: 0 auto;
		width: 100%;
		height: 100%;
	}

	.moneynum {
		font-size: 36upx;
		font-weight: 800;
	}

	.wallet-wrap {
		position: relative;
		text-align: center;
		height: 330rpx;
		background-image: url('@/static/images/wallet-bg.jpg');
		background-size: cover;
		border-radius: 20rpx;
		overflow: hidden;
		color: #fff;

		.row1 {
			height: 85rpx;
			line-height: 85rpx;
			font-weight: bold;
			padding-left: 30rpx;
			width: 100%;
			.title {
				font-size: 32rpx;
			}
			.title-icon {
				margin-left: 10rpx;
			}
			
		}

		.row2 {
			
			.title {
				font-size: 30rpx;
				font-weight: bold;
				height: 70rpx;
				line-height: 70rpx;
			}
			.u-flex{
				height: 40rpx;
				line-height: 40rpx;
			}
			.bold{
				font-weight: bold;
				font-size: 40rpx;
			}
		}
		

		.row3 {
			height: 100rpx;
			background-image: linear-gradient(to right, rgba(212, 213, 195, 0.1), #fa3f3f);
			.bold{
				font-weight: bold;
				font-size: 30rpx;
			}
			.title{
				height: 40rpx;
			}
			.u-flex{
				hight: 60rpx
			}
			
		}
		.divider{
			height: 40rpx;
		}
	}

	.tools {
		color: #333;

		.tools-title {
			line-height: 80rpx;
			font-size: 30rpx;
			font-weight: bold;
			color: #333;
		}
	}

	.grid-text {
		margin-top: 10rpx;
	}

	.info:before {
		font-weight: bold;
	}
</style>
